<template>
<div class="product-list">
    <div class="panel">
        <div class="panel-header">
            <div class="bl"></div>
            <div class="title">基本信息</div>
            <div class="more">
                <el-button type="primary" size="mini" @click="showEditProduct()">编辑</el-button>
            </div>
        </div>

        <div class="panel-body">
            <el-descriptions class="margin-top" :column="1" border>
                <el-descriptions-item labelClassName="desc-lable">
                    <template slot="label">
                        <i class="el-icon-school"></i>
                        咨询门店
                    </template>
                    {{ product.store.title }}
                </el-descriptions-item>

                <el-descriptions-item labelClassName="desc-lable">
                    <template slot="label">
                        <i class="el-icon-date"></i>
                        预算
                    </template>
                    {{ product.budget }}
                </el-descriptions-item>

                <el-descriptions-item labelClassName="desc-lable">
                    <template slot="label">
                        <i class="el-icon-date"></i>
                        预产期
                    </template>
                    {{ product.event_month }}
                </el-descriptions-item>
                <el-descriptions-item labelClassName="desc-lable">
                    <template slot="label">
                        <i class="el-icon-date"></i>
                        进店时间
                    </template>
                    {{ product.entry_time }}
                </el-descriptions-item>

                <el-descriptions-item labelClassName="desc-lable">
                    <template slot="label">
                        <i class="el-icon-chat-square"></i>
                        备注
                    </template>
                    {{ product.remark }}
                </el-descriptions-item>
            </el-descriptions>
        </div>
    </div>
    <edit-product-view ref="editViewRef"></edit-product-view>
</div>
</template>

<script>
import editProductView from "./product-edit.vue";
export default {
    name: "ProductList",
    props: {
        product: {
            type: Object,
            default: {
                id: 0,
                store_id: 0,
                store: {
                    id: "",
                    title: "",
                },
                budget: "",
                event_date: "",
                event_month:"",
                remark: "",
            },
        },
    },
    components: {
        editProductView,
    },
    data() {
        return {};
    },
    computed: {},
    methods: {
        showEditProduct() {
            this.$nextTick(() => {
                this.$refs["editViewRef"].showDialog(this.product);
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.product-list {
    margin-top: 10px;

    ::v-deep .desc-lable {
        width: 120px;
    }
}
</style>
